<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />		
		<meta name="author" content="" />
		<meta name="last-edit" content="2023.03.02" />
		<title>事件</title>
		<style type="text/css">

			
		</style>

		<body>
      <button id="upload1" onclick="onClick('内联绑定')">上传1</button>
      <button id="upload2">上传2</button>
      <button id="upload3">上传3</button>
      <input id="input" />
      
			<script type="text/javascript">
        let onClick = (text) => {
          console.log(text);
        }

        let num = 0
        // 动态绑定事件
        document.querySelector('#upload2').onclick = function(event) {
          onClick('动态绑定')
          num ++ 
          if (num === 3) {
            document.querySelector('#upload2').onclick = null
          }
          console.log(event);
        }

        // 事件监听
        document.querySelector('#upload3').addEventListener('click', (event) => {
          onClick('事件监听')
          console.log(event);
        })


        document.querySelector('#input').onkeydown = (event) => {
          console.log(event);
        }


			</script>
		</body>
	</head>

</html>